<template>
  <div class="order">
    <div class="header">
      <span v-text="headerText">购物车</span>
    </div>
    <div class="order-info">
      <p>已选购<span>0</span>件商品</p>
      <button>编辑</button>
    </div>
    <!--    订单内容-->
    <div class="order-content">
        <div class="order-list">
            <div class="order-item">
              <div class="order-title">
                <van-checkbox class="checkbox" />
                <div class="shops-logo"></div>
                <h3>店铺名</h3>
              </div>
              <div class="goods-order">
                <GoodsOrder @sub="sub" @add="add" v-for="goodsItem in goodsDatas" :goods-datas="goodsItem" :key="goodsItem.id"></GoodsOrder>
              </div>
            </div>
        </div>
    </div>


<!--    提交订单栏-->
    <van-submit-bar class="order-submit-bar" :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
    <!--    底部 tabbar 栏-->
    <GTabbar active1="1"></GTabbar>
  </div>
</template>

<script>
import GTabbar from "@/components/GTabbar/GTabbar";
import GoodsOrder from "@/components/GoodsOrder/GoodsOrder";
import { Checkbox , SubmitBar } from 'vant';
export default {
  name: "Order",
  data() {
    return {
      checked: true,
      headerText: '购物车',
      price: 0,
      goodsDatas: [
        {
          id: 0,
          isChecked: true,
          goodsImg: "https://img.yzcdn.cn/vant/cat.jpeg",
          goodsTitle: '这是店铺标题',
          goodsSize: '这是商品规格',
          goodsPrice: 19,
          goodsNum: 0
        },{
          id: 1,
          isChecked: true,
          goodsImg: "https://img.yzcdn.cn/vant/cat.jpeg",
          goodsTitle: '这是店铺标题',
          goodsSize: '这是商品规格',
          goodsPrice: 19,
          goodsNum: 0
        },
      ]
    }
  },
  components: {
    GTabbar,
    GoodsOrder,
    'van-checkbox': Checkbox,
    'van-submit-bar': SubmitBar
  },
  methods:{
    onSubmit(){
      console.log('提交订单')
    },
    onClickEditAddress(){
      console.log('设置收货地址')
    },
    sub(x){
      console.log(x)
    },
    add(x,y){
      console.log(x,y)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./Order.scss";
</style>
